<template>
  <section class="todo">
    <header>
      <h1>todos</h1>
      <input @keyup.enter="Addtodo" class="shu" v-model="form.title" placeholder="你要输入什么？" autofocus />
    </header>
    <section>
      <table style="width: 100%">
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td align="center">
              <input type="checkbox" :value="item.id" @change="Checkbox" />
            </td>
            <td align="center" height="50px">{{ item.title }}</td>
            <td align="center">
              <button @click="del(item.id)">X</button>
            </td>
            <td align="center">
              <button @click="updateTitle(item.id)">修改</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <footer>
      <button @click="deleteRows">清除选中项</button>
      <input  
        placeholder="你要修改成什么？" 
        v-if="show" 
        v-model="form.title"
        @keyup.enter="edit"
        autofocus />
    </footer>
    <div>
      <button @click="prevPage" :disabled="pageIndex === 1">上一页</button>
      <span>  {{ pageIndex }}</span>
      <button @click="nextPage" :disabled="pageIndex === totalPage">下一页</button>
      <span>
        <select v-model="pageIndex" @change="goToPage">
          <option v-for="page in totalPage" :key="page">{{ page }}</option>
        </select>
      </span><br>
      <span>总页数：{{ totalPage }}</span><br>
      <span>总数据：{{ totalCount }}</span>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: [],
      form: {
        title: "",
      },
      show:false, //修改框的显示
      tableData: [],
      pageIndex: 1,//初始页数
      pageSize: 5,//每页数据数
      totalPage: 0,//页数
      totalCount:0,//数据数
      editid:0     //要修改的id值
    };
  },
  mounted() {
    // 初始化加载数据
    this.list();
  },
  methods: {
    //显示分页查询结果
    list() {
      // 发起请求获取数据
      this.axios
        .get("http://localhost:5200/api/Todos/GetUsers?PageIndex="+this.pageIndex+"&PageSize="+this.pageSize)
        .then((res) => {
          this.totalCount=res.data.totalCount;//数据总数量
          this.tableData = res.data.items;// 将每页5个数据绑定数据到数组
          this.totalPage =Math.ceil(res.data.totalCount / this.pageSize); // 总页数=数据总数/单页数据数，并向上取整
          console.log(res)
        })
        .catch((error) => {
          console.error(error);
        });
    },
    prevPage() {
      // 上一页
      if (this.pageIndex > 1) {
        this.pageIndex--;
        this.list();
      }
    },
    nextPage() {
      // 下一页
      if (this.pageIndex < this.totalPage) {
        this.pageIndex++;
        this.list();
      }
    },
    //通过下拉框到达指定页数
    goToPage() {
      this.axios
        .get("http://localhost:5200/api/Todos/GetUsers?PageIndex="+this.pageIndex+"&PageSize="+this.pageSize)
        .then((res) => {
          this.totalCount=res.data.totalCount;
          this.tableData = res.data.items;
          this.totalPage =Math.ceil(res.data.totalCount / this.pageSize);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    //添加
    Addtodo(e) {
      //e:通常是一个事件对象，表示触发事件的事件对象
      //e.target：找到输入框input组件
      //e.target.value  找到组件后，进入方法获取输入框的值value
      const title = e.target.value.trim();//获取输入框的值并去除字符串两端的空白字符
      //检查title是否有值，为空停止
      if (!title) {
        return;
      }
      this.axios
        .post("http://localhost:5200/api/Todos/Add", this.form)
        .then((res) => {
          if (res.data) {
            this.list();
            this.form.title="";
          } else {
            console.log("error");
            return false;
          }
        });
    },
    //删除
    del(id) {
      this.axios
        .delete("http://localhost:5200/api/Todos/Delete?id=" + id)
        .then((res) => {
          if (res.data) {
            this.list();
          }
          else {
            console.log("error");
            return false;
          }
        });
    },
    //修改
    edit(e){
      const title = e.target.value.trim();
      if (!title) {
        return;
      }

      this.axios.put('http://localhost:5200/api/Todos/Update?id='+this.editid, this.form)
        .then((res) => {
          if (res.data) {
            this.show=false;
            this.form.title="";
            this.list();
          }
        })
        .catch(error => {
          console.error('标题修改失败:', error);
        });
    },
    //点击修改按钮，修改框显示并获得要修改的值的id
    updateTitle(id) {
      this.show=true;
      this.editid=id;
    },
    //多项删除的多选框
    Checkbox(event) {
      const rowId = event.target.value;//得到复选框的值
      console.log("🚀 ~ Checkbox ~ event.target:", event.target)
      console.log("🚀 ~ Checkbox ~ rowId:", rowId)
      //如果复选框被选中（checked为true）
      //它会将"rowId"添加到一个名为"selectedRows"的数组中。
      if (event.target.checked) {
        this.selectedRows.push(rowId);
      } 
      //如果复选框未被选中（checked为false）
      //它会查找数组中是否存在"rowId"的索引。
      //如果存在，它将使用splice()方法来从数组中删除该索引处的元素
      else {
        const index = this.selectedRows.indexOf(rowId);
        if (index > -1) {
          this.selectedRows.splice(index, 1);
        }
      }
    },
    //多项删除
    deleteRows() {
      //判断"selectedRows"数组的长度是否大于0，以确保至少选择了一行
      if (this.selectedRows.length > 0) {
        this.axios
          .delete("http://localhost:5200/api/Todos/DeleteAll", {
            data: this.selectedRows,
          })
          .then((res) => {
            if (res.data) {
              this.list();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>

<style>
.todo {
  font-size: 30px;
  width: 500px;
  margin-left: 700px;
}

.todo h1 {
  text-align: center;
}

.shu {
  width: 500px;
  height: 30px;
}</style>
